<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router'
import { post } from '../js/http';

const loginData = ref({});
const registerData = ref({});
const showLoginBox = ref(true);

const router = useRouter();

const login = () => {
    post('/auth/login', loginData.value).then(res=>{
        ElMessage({type:res.status?'success':'error', message: res.message});
        if(res.status){
            let username = res.data.username;
            let name = res.data.name;
            localStorage.setItem('routing-username', username);
            localStorage.setItem('routing-name', name);
            router.push('/')
        }
    })
}

</script>

<template>
    <div class="login">
        <el-row justify="center">
            <el-col :md="8" :xl="5" :sm="22">
                <el-card v-show="showLoginBox">
                    <h3>交路工具 | 登录</h3>
                    <el-form :model="loginData" label-position="top">
                        <el-form-item label="账号">
                            <el-input placeholder="输入用户名" type="text" v-model="loginData.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input @keydown.enter="login" placeholder="输入密码" type="password" v-model="loginData.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align:right; width: 100%;">
                                <!-- <el-button style="width: 100px;" @click="showLoginBox=false">注册</el-button> -->
                                <el-button style="width: 100px;" type="primary" @click="login">登录</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card v-show="!showLoginBox">
                    <h3>交路工具 | 注册</h3>
                    <el-form :model="registerData" label-position="top">
                        <el-form-item label="账号">
                            <el-input placeholder="输入用户名" v-model="registerData.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="输入密码" type="password" v-model="registerData.password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input placeholder="再次输入密码" type="password" v-model="registerData.confirmPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="工号">
                            <el-input placeholder="输入密码" type="text" v-model="registerData.num"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input placeholder="输入密码" type="text" v-model="registerData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input placeholder="输入密码" type="text" v-model="registerData.telphone"></el-input>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-input placeholder="输入密码" type="text" v-model="registerData.dept"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align:right; width: 100%;">
                                <el-button style="width: 100px;" @click="showLoginBox=true">返回登录</el-button>
                                <el-button style="width: 100px;" type="primary">提交信息</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped>
.login{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--el-color-info-light-9);
}
h3{
    color: var(--el-color-dark);
}
</style>